// 对mars进行二次封装的库函数
import * as mars3d from "mars3d"
const Cesium = mars3d.Cesium 

// 初始化三维场景
export function initMap() {
    let mapOptions = {
        // basemaps: [ 
        //   {
        //     name: "蓝色底图",
        //     icon: "img/basemaps/bd-c-midnight.png",
        //     type: "arcgis",
        //     url:
        //       "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
        //     enablePickFeatures: false,
        //     chinaCRS: mars3d.ChinaCRS.GCJ02,
        //     show: true,
        //   },
        // ],
        basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
      };
    let map = new mars3d.Map("mars3d-container", mapOptions);
    return map;
}
// 加载单体化模型
export function showModel(map) {
    var fragmentShader = `
          // 注意shader中写浮点数是，一定要带小数点，否则会报错，比如0需要写成0.0，1要写成1.0
          float _baseHeight = 0.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
          float _heightRange = 80.0; // 高亮的范围(_baseHeight ~ _baseHeight + _heightRange)
          float _glowRange = 100.0; // 光环的移动范围(高度)

          // 建筑基础色
          float mars_height = marsJzwHeight - _baseHeight;
          float mars_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
          float mars_a12 = mars_height / _heightRange + sin(mars_a11) * 0.1;
          gl_FragColor *= vec4(vec3(mars_a12), 1.0);// 渐变

          // 动态光环
          float time = fract(czm_frameNumber / 360.0);
          time = abs(time - 0.5) * 2.0;
          float mars_h = clamp(mars_height / _glowRange, 0.0, 1.0);
          float mars_diff = step(0.005, abs(mars_h - time));
          gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - mars_diff);
       `;
    const tiles3dLayer = new mars3d.layer.TilesetLayer({
        type: "3dtiles",
        name: "城市白模",
        url: "./models/cityModel/tileset.json",
        position: { lng: 118.7815268, lat: 32.0157331, alt: -10.0 },
        maximumScreenSpaceError: 1,
        maximumMemoryUsage: 1024,
        // marsJzwStyle: fragmentShader,
        style: {
            color: {
                conditions: [
                    ["true", 'rgb(52, 141, 220)'], //设置建筑物颜色
                ],
            },
        },
        popup: "all",
    });
    map.addLayer(tiles3dLayer);
}

// 在layer上绑定监听事件相关
export function bindLayerEvent(graphicLayer) {
    // 在layer上绑定监听事件
    graphicLayer.on(mars3d.EventType.click, function (event) {
        console.log("监听layer，单击了矢量对象", event);
    });
    /* graphicLayer.on(mars3d.EventType.mouseOver, function (event) {
      console.log("监听layer，鼠标移入了矢量对象", event)
    })
    graphicLayer.on(mars3d.EventType.mouseOut, function (event) {
      console.log("监听layer，鼠标移出了矢量对象", event)
    }) */
    // 数据编辑相关事件， 用于属性弹窗的交互
    graphicLayer.on(mars3d.EventType.drawCreated, function (e) {
        eventTarget.fire("graphicEditor-start", e);
    });
    graphicLayer.on(
        [
            mars3d.EventType.editStart,
            mars3d.EventType.editMovePoint,
            mars3d.EventType.editStyle,
            mars3d.EventType.editRemovePoint,
        ],
        function (e) {
            eventTarget.fire("graphicEditor-update", e);
        }
    );
    graphicLayer.on(
        [mars3d.EventType.editStop, mars3d.EventType.removeGraphic],
        function (e) {
            eventTarget.fire("graphicEditor-stop", e);
        }
    );
}
// 弹窗相关方法
export function bindLayerPopup(graphicLayer) {
    graphicLayer.bindPopup(function (event) {
        const attr = event.graphic.attr || {};
        attr["类型"] = event.graphic.type;
        attr["来源"] = "我是layer上绑定的Popup";
        attr["备注"] = "我支持鼠标交互";
        return mars3d.Util.getTemplateHtml({
            title: "矢量图层",
            template: "all",
            attr: attr,
        });
    });
}
export function showMoreBillboard(){
    // 读取json数据记录到数组
    // axios.
    // 遍历数组内容执行显示图标的方法
    array.forEach(element => {
        showBillboard()
    });
}
export function showBillboard(graphicLayer) {
      const graphic = new mars3d.graphic.BillboardEntity({
        name: "贴地图标",
        position: [118.791551,32.039215,20],
        style: {
          image: "./img/bengzhan.png",
          scale: 1.0,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // 是否贴地
          clampToGround: false,
          // label: { text: "鼠标移入会放大", pixelOffsetY: -50 },
          // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
          highlight: {
            scale: 1.2
          }
        },
        attr: { remark: "示例2" }
      })
      graphicLayer.addGraphic(graphic)
      
}